<template>
  <div class="tag" :style="tagStyle">
      <span class="text">
          {{ text }}
      </span>
  </div>
</template>

<script>
export default {
    name: 'tag',
    props: {
        state: Boolean,
        text: String,
        activeColor: {
            type: String,
            default: () => '#1989fa'
        }
    },
    computed: {
        tagStyle() {
            if (this.state) {
                return `background: ${this.activeColor}; color: white; border: 1px solid transparent`
            } else {
                return `background: white; color: #1989fa; border: 1px solid #1989fa;`
            }
        }
    },
}
</script>

<style scoped>
.tag {
    padding: 2px 4px;
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
}
.text {
    color: inherit;
    font-size: 16px;
    font-weight: 400;
}
</style>